<ion-header>
    <header-component>
        <ion-toolbar>
            <ion-buttons *ngIf="iconShow" class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ sysName }}</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>

<ion-content>
    <div class="top">
        <!-- 左边部分数据 -->
        <div class="left">
            <div>
                <label>监测点</label>
                <p [ngClass]="{ 'totalColor': fireRoomData.Total }">{{ fireRoomData.Total || 0 }}</p>
            </div>
            <div>
                <label>火警点</label>
                <p [ngClass]="{ 'alarmColor': fireRoomData.AlarmCount }">{{ fireRoomData.AlarmCount || 0 }}</p>
            </div>
        </div>

        <!-- 中间部分数据 -->
        <div class="mid">
            <section>
                <div class="Text-init">
                    <div class="fire-alarm-info" *ngFor="let alarmInfo of alarmInfos" [ngStyle]="{ color: alarmInfo.type === 1? '#FF1B1B' : '#FF8B02' }">
                        <span>{{ alarmInfo.dateTime }}</span>
                        <p>{{ alarmInfo.content }}</p>
                    </div>
                </div>
            </section>
        </div>

        <!-- 右边部分数据 -->
        <div class="right">
            <div>
                <label>正常点</label>
                <p [ngClass]="{ 'normalColor': fireRoomData.NormalCount }">{{ fireRoomData.NormalCount || 0 }}</p>
            </div>
            <div>
                <label>故障点</label>
                <p [ngClass]="{ 'breakColor': fireRoomData.BreakDownCount }">{{ fireRoomData.BreakDownCount || 0 }}</p>
            </div>
        </div>
    </div>

    <!-- 设备类型及设备列表 -->
    <div class="bottom">
        <div class="each-device-type" *ngFor="let data of titles,let index=index ">
            <div class="each-title">
                <div class="left ">
                    <img [src]="data.imgUrl " alt=" ">
                    <span>{{ data.title }}</span>
                </div>
                <div class="right ">
                    <span [ngClass]="{'ml': item.value !== null}" *ngFor="let item of data.infos ">
                        <label>{{ item.name }}</label>
                        <p *ngIf="item" [ngStyle]="{ 'color': item.value ? item.imgColor : '#777' }">{{ item.value }}</p>
                    </span>
                </div>
            </div>
            <div class="device-list " (click)="toDetail(index)">
                <div class="each-device" *ngFor="let info of data.infosDetail; let i=index ">
                    <p>{{ info.fireDeviceTypeName || '' }}</p>
                    <p [ngClass]="{ 'totalColor': info.deviceTotalCount }">{{ info.deviceTotalCount || 0 }}</p>
                    <p [ngClass]="{ 'normalColor': info.normalCount }">{{ info.normalCount || 0 }}</p>
                    <p *ngIf="data.type === 1" [ngClass]="{ 'alarmColor': info.alarmCount }">{{ info.alarmCount || 0 }}</p>
                    <p *ngIf="data.type !== 3" [ngClass]="{ 'breakColor': info.breakDownCount }">{{ info.breakDownCount || 0 }}</p>
                    <p *ngIf="data.type === 3" [ngClass]="{ 'breakColor': info.alarmCount }">{{ info.alarmCount || 0 }}</p>
                </div>
            </div>
        </div>
    </div>

</ion-content>